<template>
  <div>
    <h1>App</h1>
    <ul>
      <li>
        <RouterLink to="/home">Home</RouterLink>
        <button @click="$router.push('/home')">Home1</button>
        <button @click="router.push('/home')">Home2</button>
      </li>
      <li>
        <RouterLink to="/123">123</RouterLink>
      </li>
      <li>
        <RouterLink to="/abc">abc</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/100/list/20">/shop/100/list/20
        </RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/200/list/10">/shop/200/list/10</RouterLink>
      </li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>
<script setup>
import { watch } from 'vue';
import { useRoute, useRouter,onBeforeRouteLeave } from 'vue-router';
// hook函数，一般是use前缀
const route = useRoute();//route===$route 
const router = useRouter();

watch(() => route.params, (a, b) => {
  console.log(a, b);
});
</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>